import { useEffect, useState } from 'react';
import { UserOutlined, LeftOutlined } from '@ant-design/icons';
import { Avatar, Row, Col, Upload, Select } from 'antd';
import { Button, Form, Input } from 'antd';
import LoginStore from '../../store/Login/index';
import { useNavigate } from 'react-router-dom';
import { uploadAvatar, updateUser } from '../../api/Editor';
import { success } from '../../utils/Notification/index';

const Editor = () => {

    const navigate = useNavigate();//路由实例

    const [form] = Form.useForm();//表单实例

    const { userInfo } = LoginStore();//用户个人身份信息

    const [avatar, setAvatar] = useState();//头像缓存

    const props = {//文件上传函数
        name: 'file',
        action: `http://localhost:9080/editor/uploadAvatar/${userInfo.id}`,
        beforeUpload(file) {
            console.log(file);
            setAvatar(file);
            return false;
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {

            }
            if (info.file.status === 'done') {
                console.log(info.file);

            } else if (info.file.status === 'error') {
                console.log('上传失败');
            }
        },

    };

    const onFinish = (values) => {
        console.log(avatar);

        values.id = userInfo.id;

        console.log('addId', values);


        const form = new FormData();

        form.append("file", avatar);

        uploadAvatar(form, userInfo.id).then(({ data }) => {//更改头像
            console.log(data);

            success(data.msg, data.data);
        });
        console.log('Success:', values);

        updateUser(values).then(({ data }) => {//更新用户信息

            console.log(data.data);

            setTimeout(() => {
                navigate('/login')
            }, 3000);

            success(data.msg, data.data);
        });
    };
    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };
    return (
        <>
            <div>
                <div style={{
                    width: "100vw",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center",
                    padding: "20px",
                    borderBottom: "1px solid #eee"
                }}>
                    <LeftOutlined onClick={() => { navigate(-1) }} />
                    <p>个人信息</p>
                    <p></p>
                </div>
                <Row>
                    <Col span={5} style={{
                        display: "flex",
                        justifyContent: "center",
                        padding: "30px"
                    }}>
                        <div style={{
                            width: '90%',
                            border: '3px solid #c7c7c7',
                            borderRadius: '25px',
                            padding: '20px',

                        }}>
                            <div style={{ display: "flex", justifyContent: "center" }}>
                                <div style={{ textAlign: "center" }}>
                                    <Upload {...props}>
                                        <Avatar size={105} src={userInfo.avatar} icon={<UserOutlined />} />
                                    </Upload>
                                    <p>{userInfo.username}</p>
                                </div>
                            </div>
                            <div>
                                <p style={{ fontSize: "20px", fontWeight: "bold" }}>职务</p>
                                <p style={{ color: "gray" }}>{userInfo.office}</p>
                            </div>
                            <div style={{ marginTop: "10px" }}>
                                <p style={{ fontSize: "20px", fontWeight: "bold" }}>注册时间</p>
                                <p style={{ color: "gray" }}>{userInfo.createTime.split("T")[0]}</p>
                            </div>
                            <div style={{ marginTop: "10px" }}>
                                <p style={{ fontSize: "20px", fontWeight: "bold" }}>邮箱</p>
                                <p style={{ color: "gray" }}>{userInfo.email}</p>
                            </div>
                        </div>
                    </Col>

                    <Col span={18} style={{ padding: "30px" }}>
                        <div style={{ border: "1px solid gray", borderRadius: "10px" }}>
                            <div style={{ padding: "10px", borderBottom: "1px solid gray" }}>
                                <p style={{ lineHeight: "50px" }}>编辑资料</p>
                            </div>
                            <div style={{ padding: "20px" }}>
                                <Form
                                    form={form}
                                    name="basic"
                                    labelCol={{ span: 8 }}
                                    wrapperCol={{ span: 16 }}
                                    style={{ maxWidth: 600 }}
                                    initialValues={userInfo}
                                    onFinish={onFinish}
                                    onFinishFailed={onFinishFailed}
                                    autoComplete="off"
                                >
                                    <Form.Item
                                        label="昵称"
                                        name="username"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="性别"
                                        name="gender"
                                        rules={[{ required: true, message: 'Please input your password!' }]}
                                    >
                                        <Select>
                                            <Select.Option value={0}>男</Select.Option>
                                            <Select.Option value={1}>女</Select.Option>
                                        </Select>
                                    </Form.Item>

                                    <Form.Item
                                        label="邮箱"
                                        name="email"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="手机"
                                        name="phone"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="公司"
                                        name="company"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="职务"
                                        name="office"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="个人简介"
                                        name="introduce"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input.TextArea showCount maxLength={300} />
                                    </Form.Item>
                                    <Form.Item label={null}>
                                        <Button type="primary" htmlType="submit">
                                            确定
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </div>
                        </div>

                    </Col>
                </Row>
            </div>

        </>
    );
}

export default Editor;